<script setup lang="ts">
import { ref } from "vue"
import { useRouter } from 'vue-router'
import axios from 'axios'
import { fireConfetti } from '../utils/confetti';

const router = useRouter()
defineProps<{ msg: string }>();
const showSuccessDialog = ref(false);

// 姓名 、手机号/邮箱、微信号
const inputValueName = ref('')
const inputValuePhone = ref('')
const inputValueWeChat = ref('')

async function onSubmit() {
  try {
    // 收集表单数据
    //判空
    if (!inputValueName.value || !inputValuePhone.value || !inputValueWeChat.value) {
      alert('请填写完整信息');
      return;
    }
    const formData = {
      name: inputValueName.value,
      phone: inputValuePhone.value,
      wechat: inputValueWeChat.value,
    };
        // 设置请求头
    const headers = {
      Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsInJvbGVOYW1lIjoiYWRtaW4iLCJpYXQiOjE3MjAyNzA4MzUsImV4cCI6MTcyMjg2MjgzNX0.rQg43sQDMNwguSuZnDBMFaVhtw8Hr1HJQrkSoHL1pjk',
    };
    // 发送POST请求
    const response = await axios.post('https://nocobase.wordsfairy.cn/api/app_reservation:create', formData, { headers });
    
    // 根据响应进行后续处理，比如提示用户提交成功
    console.log('提交成功:', response.data);
    router.push('/success');
    fireConfetti();
    // 这里可以添加例如弹窗提示用户操作结果
    showSuccessDialog.value = true; // 也可以选择在错误时显示模态框
    // 可以重置表单数据，根据需要调整
    inputValueName.value = '';
    inputValuePhone.value = '';
    inputValueWeChat.value = '';
   
  } catch (error) {
    // 处理错误情况，如网络问题或服务器错误
    console.error('提交失败:', error);
    // 这里也可以添加错误提示给用户
    alert('提交失败');
  }
  }
</script>

<template>

    <h1>{{ msg }}</h1>

    <div class="inputBox">
		<input type="text" v-model="inputValueName">
		<span>昵称</span>
		<i></i>
	</div>

    <div class="inputBox">
        <input type="text" v-model="inputValuePhone">
		<span>手机/邮箱</span>
		<i></i>
	</div>
    <div class="inputBox">
        <input type="text" v-model="inputValueWeChat">
		<span>微信号</span>
		<i></i>
	</div>
    <div class="card">
        <button type="button" @click="onSubmit">提交</button>
    </div>

    <div class="emptyView">
    </div>
    <p >幻羽轩</p>
</template>

<style scoped>
.read-the-docs {
    color: #888;
}
/* 空布局 高度100 */
.emptyView {
    height: 36vh;

}
.inputBox {
    position: relative;
    width: 100%;
    height: 43px;
    margin-top: 46px;
    /* 定义边框样式 */
}

.inputBox input {
    width: 100%;
    padding: 10px 0 5px;
    background: transparent;
    outline: none;
    box-shadow: none;
    border: none;
    color: #fff;
    font-size: 1.16em;
    letter-spacing: 0.06em;
    transition: 0.5s;
}

.inputBox span {
    position: absolute;
    left: 0;
    padding: 10px 0 5px;
    pointer-events: none;
    font-size: 1em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    /* 定义无小写字母，仅有大写字母 */
    letter-spacing: 0.1em;
    /* 是增加（值为正）或减少（值为负）字符间距 */
    transition: 0.5s;
}

.inputBox input:valid~span,
/* 表单元素的值需要根据指定条件验证时设置指定样式 */

.inputBox input:focus~span

/* 选择具有焦点的时候 */
    {
    color: #b0a4e3;
    transform: translateY(-26px);
    /* 将文字向Y轴（向上）平移16px */
    font-size: 1em;
}

.inputBox i

/* 可见的一个线 */
    {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    overflow: hidden;
}

.inputBox i::before

/* 在i标签的左边创建（伪元素）一个跟i等大的一条线，加上炫彩颜色 */
    {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #EEBD89, #D13ABD, #C973FF, #6CC6CB, #9FA5D5, #EAD6EE);
    animation: runing 1s linear infinite;
    transition: 0.5s;
}

.inputBox input:valid~i::before,
.inputBox input:focus~i::before {
    left: 0;
}

/* 创建动画 */
@keyframes runing {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 250px;
    }
}
</style>
